<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/module/bootstrap-3.4.1/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/module/bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/font/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/css/common.css">
    <title>活动</title>
</head>

<body>
    <div id="warp">
        <div class="left">
            <div class="sidebar">
                <div class="navbar navbar-default" id="mycollapse">
                    <!-- <ul class="nav navbar-nav nav-pills nav-stacked"> -->
                    <ul class="nav nav-pills nav-stacked">
                        <li><a href="/index"><i class="fa fa-dashboard fa-fw"></i>首页</a></li>
                        <li><a href="/user"><i class="fa fa-address-card fa-fw"></i>用户</a></li>
                        <li><a href="/subscribe"><i class="fa fa-calendar-times-o fa-fw"></i>预约</a></li>
                        <li class="active"><a href="/activity "><i class="fa fa-ship fa-fw"></i>活动</a></li>
                        <li><a href="/integral "><i class="fa fa-line-chart fa-fw"></i>积分</a></li>
                        <li><a href="/opinion"><i class="fa fa-pencil-square fa-fw"></i>意见</a></li>
                        <li><a href="/goods"><i class="fa fa-shopping-cart fa-fw"></i>商品</a></li>
                        <li><a href="/graph"><i class="fa fa-picture-o fa-fw"></i>轮播图</a></li>
                        <li><a href="/scan"><i class="fa fa-header fa-fw"></i>扫描记录</a></li>
                        <li><a href="/classify"><i class="fa fa-shekel fa-fw"></i>分类</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="right">
            <ol class="breadcrumb">
                <li class="active">活动</li>
            </ol>
            <div class="content">
                <div style="display: flex;align-items: center;margin-bottom: 10px;">
                    <label class="control-label">状态：</label>
                    <select class="form-control" style="width: 200px;margin-left: 10px;" v-model:value="type">
                        <option>全部</option>
                        <option>未确认</option>
                        <option>已确认</option>
                        <option>已删除</option>
                      </select>
                </div>
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">活动列表</div>
                    <!-- Table -->
                    <table class="table table-bordered table-hover" id="table">
                        <tr>
                            <th>用户名称</th>
                            <th>时间</th>
                            <th>名称</th>
                            <th>对象</th>
                            <th>内容</th>
                            <th>照片1</th>
                            <th>照片2</th>
                            <th>照片3</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(item,index) in fillterActivity" :key="index">
                            <td>{{item.nickName}}</td>
                            <td>{{item.activityTime}}</td>
                            <td>{{item.activityName}}</td>
                            <td>{{item.activityTarget}}</td>
                            <td>{{item.activityContent}}</td>
                            <td><img :src="item.img1" alt="..." class="img-rounded" style="width: 50px;height: 50px;"></td>
                            <td><img :src="item.img2" alt="..." class="img-rounded" style="width: 50px;height: 50px;"></td>
                            <td><img :src="item.img3" alt="..." class="img-rounded" style="width: 50px;height: 50px;"></td>
                            <td>
                                <span class="label label-warning" v-if="item.status === 0">未确认</span>
                                <span class="label label-info" v-else-if="item.status === 1">已确认</span>
                                <span class="label label-danger" v-else>已删除</span>
                            </td>
                            <td>
                                <button type="button" class="btn btn-info btn-xs" :disabled="item.status !== 0" @click="confirmActivity(item._id)">确认发布</button>
                                <button type="button" class="btn btn-danger btn-xs" @click="deleteActivity(item._id)" :disabled="item.status === 2">删除</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script src="/module/bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script>
        const app = new Vue({
            el: '#warp',
            data: {
                activityList: [],
                type: '全部'
            },
            methods: {
                getActivity() {
                    axios.get('/request/getActivity').then(res => {
                        if (res.status === 200 && res.data.code === 200) {
                            this.activityList = res.data.activityList
                        } else {
                            alert('获取活动列表失败')
                        }
                    })
                },
                confirmActivity(id) {
                    axios.post('/request/confirmActivity',{id}).then(res => {
                        if (res.status === 200 && res.data.code === 200) {
                            this.getActivity()
                        } else {
                            alert('确认发布失败')
                        }
                    })
                },
                deleteActivity(id) {
                    axios.post('/request/deleteActivity',{id}).then(res => {
                        if (res.status === 200 && res.data.code === 200) {
                            this.getActivity()
                        } else {
                            alert('删除活动失败')
                        }
                    })
                },
            },
            computed: {
                fillterActivity() {
                    if (this.type === '全部') {
                        return this.activityList
                    }else if (this.type === '未确认') {
                        return this.activityList.filter(item => item.status === 0)
                    }else if(this.type === '已确认'){
                        return this.activityList.filter(item => item.status === 1)
                    }else if (this.type === '已删除') {
                        return this.activityList.filter(item => item.status === 2)
                    }
                }
            },
            created() {
                this.getActivity()
            }
        })
    </script>
</body>

</html>